<template>
  <div>
    <!-- 顶部导航区域 -->
    <div
      class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
    >
      <div class="mui-scroll">
        <a
          :class="['mui-control-item',value.id==0?'mui-active':'']"
          v-for="value in category"
          :key="value.id"
          @tap="getPhoto(value.id)"
        >{{ value.title }}</a>
        <!-- tap 时mui封装的方法,只能用于mui组件 -->
      </div>
    </div>
    <!-- 图片列表  使用懒加载-->
    <ul class="photo-list">
      <router-link
        v-for="value in photoList"
        :key="value.id"
        tag="li"
        :to="'/home/photoInfo/'+value.id"
      >
        <img v-lazy="value.img_url">
        <div class="info">
          <h1 class="info-title">{{ value.title }}</h1>
          <div class="info-body">{{ value.zhaiyao }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js";
export default {
  created() {
    this.getCategory();
    this.getPhoto(0);
  },
  mounted() {
    //   一般初始化dom元素都在mounted生命周期函数里进行
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  data() {
    return {
      category: [],
      photoList: []
    };
  },
  methods: {
    //   获取分类列表
    getCategory() {
      this.$http.get("api/getimgcategory").then(res => {
        if (res.body.status == 0) {
          this.category = res.body.message;
          //   手动添加全部分类
          this.category.unshift({
            title: "全部",
            id: 0
          });
        }
      });
    },
    // 根据分类id获取图片
    getPhoto(catId) {
      this.$http.get("api/getimages/" + catId).then(res => {
        console.log(res);
        if (res.body.status == 0) {
          this.photoList = res.body.message;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
// 解决chrome滑动报错
* {
  touch-action: pan-x;
}
.photo-list {
  list-style: none;
  padding: 0 10px 10px;
  margin: 0;
  li {
    padding: 10px 0;
    padding-bottom: 0;
    position: relative;
    
    img {
      width: 100%;
      vertical-align: middle;
      box-shadow: 0 0 8px #999;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .info {
      background: rgba(0, 0, 0, 0.4);
      position: absolute;
      bottom: 0;
      color: #fff;
      max-height: 84px;
      .info-title {
        font-size: 14px;
      }
      .info-body {
        font-size: 13px;
      }
    }
  }
}
</style>


